<template>
    <div class="control">
        <label>{{inputItem.label}}</label>
        <div class="input has-padding-sm">
            <div>
                <p style="word-break: break-all">{{inputItem.value}}</p>
                <input id="xfile" hidden :name="inputItem.name" :data-img="inputItem.value" @change="processFile($event)" :accept="inputItem.accept" type="file" :required="inputItem.required">
                <a href="javascript:;" class="btn primary rounded" style="margin-right: .25rem" @click="zoomInImg"><i
                        class="icon icon-zoom-in"></i></a>
                <a href="javascript:;" class="btn danger rounded" style="margin-right: .25rem" @click="remove"><i class="icon icon-trash"></i></a>
                <a href="javascript:;" class="btn green rounded" @click="handleSelect"><i class="icon icon-file"></i></a>
            </div>
<!--            <div>-->

<!--            </div>-->
        </div>

        <p class="red-pale text-tint">{{inputItem.errors}}</p>
    </div>
</template>

<script>
    import '@/assets/css/layer.css'
    import '@/assets/js/layer.js';

    export default {
        name: 'XFileInput',
        props: {
            inputItem: {
                // inputType: 'text',
                // label: '',
                // required: false,
                // value: '',
                // placeholder: '',
                // errors: '',
            },
        },
        data() {
            return {}
        },
        methods: {
            processFile(event) {
                // @change="processFile($event)"
                this.inputItem.value = event.target.files[0];
            },
            handleSelect() {
                // $('input[name="' + this.inputItem.name + '"]').click();
                $('#xfile').click();
            },
            zoomInImg() {
                if (typeof FileReader === 'undefined') {
                    return;
                }

                // let file = $('input[name="' + this.inputItem.name + '"]').prop('files');
                let xfile = $('#xfile');
                let files = xfile.prop('files');
                if (files.length !== 0) {
                    let reader = new FileReader();
                    reader.readAsDataURL(files[0]);
                    reader.onload = function (e) {
                        let fileString = e.target.result;
                        let html = '<img style="width: 100%" src="' + fileString + '" />';
                        layer.open({
                            type: 1, // page层
                            area: ['80%', '80%'],
                            // title: this.$t('menu create'),
                            shade: 0.5, // 遮罩透明度
                            moveType: 0, // 拖拽风格，0是默认，1是传统拖动
                            shift: -1, // 0-6的动画形式，-1不开启
                            content: html
                        });
                    };
                    return;
                }

                // let img = $('input[name="' + this.inputItem.name + '"]').data('img');
                let img = xfile.data('img');
                if (img !== '') {
                    let html = '<img style="width: 100%" src="' + img + '" />';
                    layer.open({
                        type: 1, // page层
                        area: ['80%', '80%'],
                        // title: this.$t('menu create'),
                        shade: 0.5, // 遮罩透明度
                        moveType: 0, // 拖拽风格，0是默认，1是传统拖动
                        shift: -1, // 0-6的动画形式，-1不开启
                        content: html
                    });
                }
            },
            remove() {
                // $('input[name="' + this.inputItem.name + '"]').val('');
                $('#xfile').val('');
                this.inputItem.value = '';
            }
        }
    }
</script>